<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="control">
              <button>选项1</button>
              <button>选项2</button>
              <button>选项3</button>
        </div>
        <div class="content">
              <div class="box">内容1</div>
              <div class="box">内容2</div>
              <div class="box">内容3</div>
        </div>
  </div>
    <script>
        // 作业从63行开始

         // 3. 选项卡改写;  构造函数里面放数据; 原型对象里面放算法;
         var btnS = document.querySelectorAll('.control button')
         var cont = document.querySelectorAll('.box')

        // 面向过程
        // for(var i = 0 ; i < btnS.length ; i++){
        //     btnS[i].index = i
        //     btnS[i].onclick = function(){
        //         var index = this.index
        //         for(var j = 0 ; j < cont.length ; j++){ 
        //             cont[j].style.display = 'none'
        //         }
        //         cont[index].style.display = 'block'
        //     }
        // }

        // 面向对象
        // function Foo(btnS,cont){
        //     this.btnS = btnS
        //     this.cont = cont
        // }
        // Foo.prototype.show = function(){
        //     var cont1 = this.cont
        //     for(var i = 0 ; i < this.btnS.length;i++){
        //         this.btnS[i].index = i
        //         this.btnS[i].onclick = function(){
        //             var index = this.index
        //             for(var j = 0 ; j < cont1.length;j++){
        //                     cont1[j].style.display = 'none'
        //             }
        //             cont1[index].style.display = 'block'
        //         }
        //     }
        // }
        // var f1 = new Foo(btnS,cont)
        // f1.show()


        
        // // 作业开始 写注释
        // // 构造函数     接收实参
        // function Table(btns_selector,conts_selector){
        //     // 获取按钮集合 
        //     this.btns = document.querySelectorAll(btns_selector)
        //     // 获取内容集合
        //     this.conts = document.querySelectorAll(conts_selector)
        //     // 设置index
        //     this.index = 0
        //     // 调用bingEvent
        //     this.bindEvent()
        //     // 一条代码实现默认显示内容一
        //     this.changeTable()
        // }
        // // 在原型对象里创建一个bindEvent事件绑定的函数
        // Table.prototype.bindEvent = function(){
        //     // 创建一个self 赋值为指向实例对象的this ，以便区分事件绑定的this
        //     var self = this
        //     //  循环构造函数获取的按钮集合 给按钮绑定点击事件
        //     for(var i = 0 ; i < self.btns.length; i++){
        //         // 分别每个按钮 赋值对应的索引
        //         self.btns[i].index = i
        //         // 按钮绑定点击事件
        //         self.btns[i].onclick = function(){
        //             // 把按钮对应的索引赋值 给 构造函数里的index
        //             self.index = this.index
        //             // 调用原型对象里的changeTable方法
        //             self.changeTable()
        //         }
        //     }
        // }
        // // 在原型对象里创建一个changeTable切换内容的函数
        // Table.prototype.changeTable = function(){
        //     // 创建一个slef 赋值为指向实例对象的this
        //     var self = this
        //     // 循环 内容box 让内容隐藏（排他思想）
        //     for(var i = 0; i < self.conts.length;i++){
        //         self.conts[i].style.display = 'none'
        //     }
        //     // 根据index 让点击的内容元素显示
        //     self.conts[self.index].style.display = 'block'
        // }
        // // new一个实例对象
        // var tab = new Table('.control button','.box')
        // // console.log(tab)



        // 看注释写代码
        //   // 构造函数     接收实参
        //   function Table(btns_selector,contentS_selector){
        //       // 获取按钮集合 
        //       this.btns = document.querySelectorAll(btns_selector)
        //       // 获取内容集合
        //       this.contents = document.querySelectorAll(contentS_selector)
        //       // 设置index
        //       this.index = 0
        //       // 调用bingEvent
        //       this.bindEvent()
            // 一条代码实现默认显示内容一
            // this.changeTable()
        //   }
        // // 在原型对象里创建一个bindEvent事件绑定的函数
        // Table.prototype.bindEvent = function(){
        //     // 创建一个self 赋值为指向实例对象的this ，以便区分事件绑定的this
        //     var self = this
        //     //  循环构造函数获取的按钮集合 给按钮绑定点击事件
        //     for(var i = 0;i < self.btns.length;i++){
        //         // 分别每个按钮 赋值对应的索引
        //         self.btns[i].index = i
        //         // 按钮绑定点击事件
        //         self.btns[i].onclick = function(){
        //             // 把按钮对应的索引赋值 给 构造函数里的index
        //             self.index = this.index
        //             // 调用原型对象里的changeTable方法
        //             self.changeTable()
        //         }
        //     }
        // }
            
        // // 在原型对象里创建一个changeTable切换内容的函数
        // Table.prototype.changeTable = function(){
        //      // 创建一个slef 赋值为指向实例对象的this
        //     var self = this
        //      // 循环 内容box 让内容隐藏（排他思想）
        //     for(var i = 0 ; i < self.contents.length ; i++){
        //         self.contents[i].style.display = 'none'
        //     }
        //     // 根据index 让点击的内容元素显示
        //     self.contents[self.index].style.display = 'block'
        // }
           
        // // new一个实例对象
        // var tab = new Table('.control button','.box')


        // 脱稿
        // function Table(btns_selector,conts_selector){
        //     this.btns = document.querySelectorAll(btns_selector)
        //     this.conts = document.querySelectorAll(conts_selector)
        //     this.index = 0
        //     this.bindEvent()
        //     this.changeTable()
        // }

        // Table.prototype.bindEvent = function(){
        //     var self = this
        //     for(var i = 0;i < self.btns.length ; i++){
        //         self.btns[i].index = i
        //         self.btns[i].onclick = function(){
        //             self.index = this.index
        //             self.changeTable()
        //         }
        //     }
        // }
        // Table.prototype.changeTable = function(){
        //     for(var i = 0 ; i < this.conts.length ; i++){     
        //         this.conts[i].style.display = 'none'
        //     }
        //     this.conts[this.index].style.display = 'block'
        // }
        // var tab = new Table('.control button','.box')


        // 脱稿2
        function Table(btns_selector,conts_selector){
            this.btns = document.querySelectorAll(btns_selector)
            this.conts = document.querySelectorAll(conts_selector)
            this.index = 0
            this.bindEvent()
            this.changetable()
        }
        Table.prototype.bindEvent = function(){
            var self = this
            for(var i = 0; i < self.btns.length; i++){
                self.btns[i].index = i
                self.btns[i].onclick = function(){
                    self.index = this.index
                    self.changetable()
                }
            }
        }
        Table.prototype.changetable = function(){
            for(var i = 0 ; i < this.conts.length;i++){
                this.conts[i].style.display = 'none'
            }
            this.conts[this.index].style.display = 'block'
        }
        var tab = new Table('.control button','.box')

      
    </script>
</body>
</html>